<template>
    <div class="body flex flex-ai-c flex-jc-c">
        <div class="bc-white box-shadow br-10 o-h flex flex-jc-sb" style="width: 1000px;height: 550px;">
            <div class="left-item flex flex-ai-c flex-jc-c">
                <div></div>
            </div>
            <div class="right-item text-align flex1 padding-30">
                <div class="font-30 main-color m-t-30">欢迎登录</div>
                <div class="m-t-40">
                    <div class="m-b-20 text-align-l">
                        <a-input ref="userNameInput" v-model:value="forstar.login_name" placeholder="用户名">
                            <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                        </a-input>
                    </div>
                    <div class="m-b-20 text-align-l">
                        <a-input type="password" ref="userNameInput" v-model:value="forstar.password" placeholder="密码">
                            <template #prefix><UnlockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
                        </a-input>
                    </div>
                    <code-item @codeValue="codeValue" codeType="formlc_login" @phone="phnoeNumber" />
                </div>
                <div>
                    <a-button type="primary" style="width: 100%;" @click="loginGo">登录</a-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import codeItem from '../components/phone-email-Validate.vue'
import apiLogin from '../api/user.js'
import md5 from 'md5'
    export default {
        components:{
            codeItem
        },
        data() {
            return {
                forstar:{
                    login_name:'',
                    password:'',
                    sms_code:'',
                    phone:''
                },
                ipArddes:''

            }
        },
        mounted(e) {
            this.loginRepetion();
        },
        methods:{
            loginRepetion(){
                if (window.location.search == '?chang=5') {
                    this.$store.commit('saveUser',null)
                    this.$store.commit('saveToken',null)
                    this.$store.commit('saveUserName',null)
                }else if (this.$store.state.token) {
                    this.$router.push({path:'/'})
                }
            },
            loginGo(){
                if (!this.forstar.login_name ) {
                    this.$message.error('手机号不能为空')
                    return false
                }
                if (!this.forstar.password ) {
                    this.$message.error('请输入密码')
                    return false
                }
                if (!this.forstar.phone ) {
                    this.$message.error('请输入手机号')
                    return false
                }
                if (!this.forstar.sms_code ) {
                    this.$message.error('请输入验证码')
                    return false
                }
                this.forstar.password = md5(this.forstar.password)
                apiLogin.getLogin(this.forstar).then((res) => { 
                    if(res.status == 1) {
                        this.$store.commit('saveUser',res.result)
                        this.$store.commit('saveToken',res.result.token)
                        this.$store.commit('saveUserName',res.result.username)
                        this.$router.push({path:'/'})
                        this.$store.dispatch('saveUserName') // 初始化
                        this.$store.state.username // 读取值
                    }
                })
            },
            /*接收验证码*/
            codeValue(e){
                this.forstar.sms_code = e
            },
            /*接收手机号*/
            phnoeNumber(e){
                this.forstar.phone = e
            }
        }
    }
</script>

<style scoped>
    .body{
        width: 100%;
        min-height: 100vh;
        background-image: url(../assets/images/login_bg.png);
        background-repeat: no-repeat;
    }

    .left-item{
        width: 650px;
        height: 100%;
		background-color: #3293fe;
    }
	
	.left-item > div{
		width: 650px;
		height: 100%;
		background-image: url('../assets/images/login_left_bg.png');
		background-repeat: no-repeat;
	}

</style>
